iT邦幫忙

2023 iThome 鐵人賽

DAY 25
0
自我挑戰組

前端菜雞_賀周歲成長日誌系列 第 25

關於變數命名我也還在學習

  • 分享至 

  • xImage
  •  

前言

寫專案時是否也曾經被自己命的變數名字嚇到:怎麼這麼醜…。

這雖然是個基本的需求,但不太會有人教,所以我決定去問 chatGPT 老師

本篇主要會是我綜合老師所講述的內容,和自己理解後舉例。一起重新給自己注入,變數命名的概念吧~


變數命名應有的信念

  1. 好的命名,應該要看名稱就大概可以猜出,此變數在專案中是拿來做什麼的。
  2. 有更好的變數名稱就請不要留戀地改吧。

變數命名技巧

有意義的名稱

變數名應該具有描述性,讓其他人(包括未來的你)能夠理解變數的用途。避免使用單個字母或縮寫,除非它們在上下文中是明確的。

// 不好的命名方式
let x = 10;

// 好的命名方式
let itemCount = 10;

避免過長的名稱、或是過度縮寫

長度過長的變數名稱可能會讓代碼變得冗長。應保持變數名稱簡潔,但仍然有意義。

過度縮寫可能會降低代碼的可讀性。除非它們是眾所皆知的,像是button → btn、 Navigation bar → navbar、identity → id。

避免用到保留字

不要使用程式語言的保留字(關鍵字)作為變數名稱,以免引起錯誤。

例如在JS中已經是指令的字 catch、delete,就不要再拿來當變數名了,更不用說 function 這樣的字。

保持一致性

在整個項目中保持一致的命名慣例,這有助於提高代碼的可讀性。如果你在項目中使用某種風格,則應該遵循相同的風格。

如果在專案中,命名的概念是「操作行為+區塊名」,例如editNameeditNum,那在同個單位中的變數,盡量都按照此命名方式,不要突然冒出一個命名邏輯不同的,例如scoreEditer,按照前述命名概念應該要叫editScore

使用常規的命名慣例

不同的程式語言可能有自己的命名慣例,例如 JavaScript 中的駝峰命名法或 CSS 中的短橫線命名法。

JS中多個單詞組成的變數名稱,會建議使用駝峰命名法(Camel Case),其中單詞之間用大寫字母開頭,不使用空格或底線。

提醒:使用有意義的變數前綴

有時在變數名稱中添加一個有意義的前綴可以幫助區分不同類型的變數。例如,可以在布林變數前添加 "is" 或 "has"。

例如在Vue中綁定class時,使用isActive作為範例來綁定,代表「這個class目前有作用=true」或「這個class目前有作用=false」。

let isReady = true;
let hasPermission = false;

提醒:註釋複雜的變數

如果變數的用途比較不能一眼看出,可以「適量」添加註釋來解釋其用途。

// 用於存儲用戶的年齡
let userAge = 30;

結語

以後寫code時刻提醒自己:好好命名好好命名好好命名。

今天就到這,如有說明不周或錯誤的地方,還請多留言討論(鞠躬)。

參考

chatGPT
變數命名其他文章
https://medium.com/程式愛好者/變數命名-f53cd1115076
JavaScript 保留字
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Lexical_grammar


上一篇
VSCode上的好用工具
下一篇
從 node.JS 和 Vue 理解 MVC 及 MVVM
系列文
前端菜雞_賀周歲成長日誌31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言